<template>
	<div class="addPatients">
		<right-header :header-name="headerName"></right-header>
		<el-breadcrumb separator="/" class="breadcrumb">
		  	<el-breadcrumb-item :to="{ path: '/waitPort/addPatients' }">添加患者</el-breadcrumb-item>
		  	<el-breadcrumb-item>完善患者信息</el-breadcrumb-item>	  
		</el-breadcrumb>
		<div class="search-patients">
			<el-input v-model="searchPat" placeholder="请输入患者姓名或就诊卡号或住院号"></el-input>
			<el-button type="primary" @click='search'>搜索</el-button>
			<el-button type="primary" @click='manadd'>手动添加</el-button>
		</div>
		<div class="patients-list" v-loading.body='showList'>
			<div class="noData" v-show='showTable'>
				从医院系统中，选择并添加已来院就诊的患者
			</div>
			<div class="list-box" v-show='!showTable' >
				<el-table	
				:data='patientsData'	
				stripe
				style="width: 100%"
				>
				<el-table-column
				prop='patNumber'
				label="就诊号/住院号"
				>
				</el-table-column>
				<el-table-column
				prop='name'
				label="姓名"
				>
				</el-table-column>
				<el-table-column
				prop='sex'
				label="性别">
				</el-table-column>
				<el-table-column
				prop='age'
				label="年龄"
				:filters='[{text:'age',value:'age'}]'
				:filter-method="filterAge"
				>
				</el-table-column>
				<el-table-column
				prop='diagnosis'
				label="诊断">
				</el-table-column>
				<el-table-column
				prop='departments'
				label="所在科室">
				</el-table-column>
				<el-table-column		 
			      width="100">
			      <template scope="scope">
			        <el-button @click="handleClick(scope.$index, scope.row)" type="primary" v-if='scope.row.added'>添加</el-button>
			        <el-button type="text" v-else >已添加</el-button>		   
			      </template>
			    </el-table-column>
				</el-table>
			</div>
		</div>
	</div>
</template>

<style lang='scss' rel='stylesheet/scss' scoped>
	.addPatients{
		padding:0 20px;
		.bread-crumbs{
			margin-top: 20px;
		}
		.search-patients{
			width: 500px;
			display: flex;
			margin: 50px auto;
		}
		.patients-list{
			.noData{
				text-align: center;
				padding: 10px 0;
			}
			.list-box{
				table{
					td{
						height: 50px;
					}
				}
				.el-button{
					padding:10px 15px;
					width: 70px;
				}
			}
		}
	}
</style>

<script>
import {addpatients} from '@/config/api'
import rightHeader from '@/components/rightHeader'
	export default {
		data() {
			return {
				headerName: '等待肾源患者',
				showTable: true,
				showList:false,
				searchPat: '',
				patientsData: [
				{
					patNumber: '60255481',
					name: '张三',
					sex: '男',
					age: '36',
					diagnosis: '慢性肾病5期',
					departments: '肾移植中心',
					added: false
				},
				{
					patNumber: '60255481',
					name: '张三',
					sex: '男',
					age: '36',
					diagnosis: '慢性肾病5期',
					departments: '肾移植中心',
					added: true
				}
				]
			}
		},
		computed: {
			
		},
		methods: {
			handleClick(index, row) {
				this.$router.push('/waitPort/addPatients/confirmadd')
				
			},
			manadd(){
				this.$router.push('/waitPort/addPatients/manualAdd')
			},
			search() {		
				this.showList = true;
				if(this.searchPat){
					addpatients({value:this.searchPat}).then((res)=>{
						this.patientsData = res.data.array;
						this.showTable =false;
						this.showList =false;
					})
				}else{
					this.showTable =false;
					this.showList =false;
				}		
			},
			filterAge(value,row){
				console.log(value,row)
			}
		},
		components: {
			'right-header': rightHeader
		}
	}
</script>

